<template>
	<view class="category">
		<view class="item flex align-center justify-between " v-for="(item,index) in pageData" :key="index" :class="'status'+item.status" @click="playVideo(index)">
			<view class="left middle flex flex-direction ">
				<view class="round  middle">
					<text class="cuIcon-playfill" v-if="item.status==2"></text>
				</view>
				94:57
			</view>
			
			<view class="center" >
				{{item.title}}
			</view>
			
			<view class="right flex justify-end ">
				<view class="cuIcon-playfill middle round ">
			
				</view>
				
			</view>
		</view>
		
	</view>
	
</template>

<script>
	export default{
		name:"discuss",
		data(){
			return{
				selectIndex:-1,
				pageData:[
					{
						time:"",
						title:"统计的产生和发展",
						status:1,//看过
						path:""
						
					},
					{
						time:"",
						title:"统计研究的基本方法和统计工作过程中产生的问题",
						status:1,//看过
						
					},
					{
						time:"",
						title:"概率的性质与运算法则",
						status:0,//未看过
						
					},
					{
						time:"",
						title:"离散型随机变量及其分布",
						status:2,//选中
						
					},
					{
						time:"",
						title:"分类数据的整理和显示",
						status:0,//未看过
						
					},
					{
						time:"",
						title:"顺序数据的整理和显示",
						status:0,//未看过
						
					},
					{
						time:"",
						title:"数值型数据的整理和显示",
						status:0,//未看过
						
					},
					{
						time:"",
						title:"假设检验的基本问题",
						status:0,//未看过
						
					},
					{
						time:"",
						title:"方差分析的思想和思路",
						status:0,//未看过
						
					},
					{
						time:"",
						title:"多个样本的非参数检验",
						status:0,//未看过
						
					},
				]
				
				
			}
		},
		mounted() {
			this.playVideo(3);
		},
		methods:{
			playVideo(index){
				
				if(this.selectIndex!=-1){
					this.pageData[this.selectIndex].status=1;
				}
				
				this.pageData[index].status=2;
				this.selectIndex=index;
				
				this.$emit("playVideo");
			}
		}
		
		
		
		
	}
</script>

<style lang="scss" scoped>
	.category{
		width: inherit;
		min-height: 200rpx;
		background-color: #F7F7F7;
		padding-top: 20rpx;
		padding-bottom: calc(20rpx+env(safe-area-inset-bottom) / 2);
		.item{
			width: calc(100vw*(690/750));
			margin:20rpx auto;
			min-height: calc(100vw*(100/750));
			background: #FFFFFF;
			padding: 30rpx;
			box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
			border-radius: 20rpx;
			.left{
				.round{
					margin-bottom: 10rpx;
					width: calc(100vw*(20/750));
					height: calc(100vw*(20/750));
					
				}
			}
			.center{
				font-size: 28rpx;
				font-weight: 800;
				line-height: 40rpx;
				width: calc(100vw*(447/750));
			}
			.right{
				.cuIcon-playfill{
					border: 2rpx solid #666666;
					width: calc(100vw*(36/750));
					height: calc(100vw*(36/750));
				}
				
			}
			
			
			
		}
		.status2{//选中状态
			.left{
				font-weight: 500;
				color: #333333;
				.round{
					font-size: 20rpx;
					color: white;
					background: #1270E0;
				}
			}
			.center{
				color: #1270E0;
			}
			.right{
				.cuIcon-playfill{
					opacity: 0;
				}
				
			}
		}
		.status1{
			.left{
				font-size: 20rpx;
				font-weight: 500;
				color: #999999;
				.round{
					background: #DBDBDB;
				}
			}
			.center{
				font-size: 28rpx;
				font-weight: 800;
				color: #999999;
			
			}
			.right{
				.cuIcon-playfill{
					border: 2rpx solid #DBDBDB;
					color: #DBDBDB;
					
				}
				
			}
		}		
		.status0{//未看过
			.left{
				font-size: 20rpx;
				font-weight: 500;
				color: #999999;
				.round{
					border: 2rpx solid #999999;
				}
			}
			.center{
				font-size: 28rpx;
				font-weight: 800;
				color: #333333;
			
			}
			.right{
				.cuIcon-playfill{
					border: 2rpx solid #DBDBDB;
					color: #666666;
					
				}
				
			}
		}
		
	}
	
	
	
</style>
